<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui弹框</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>

    <body>

        <br>
        <button class="layui-btn layui-btn-primary " onclick="f()">click me to open load1</button>
        <button class="layui-btn layui-btn-primary " onclick="f1()">click me to open load2</button>
        <button class="layui-btn layui-btn-primary " onclick="f2()">click me to open shade</button>
        <button class="layui-btn layui-btn-primary " onclick="f3()">click me to close</button>
        <button class="layui-btn layui-btn-primary " onclick="f4()">click me to open 定时加载层 </button>


        <input type="text" name="" id="" class="layui-input" disabled value="caonima">

        <script>
            var $;
            /* 预先加载模块 layui.js 的两个底层方法之一 */
            layui.use(['form', 'element', 'layer'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;
                $ = layui.jquery;
            });
            var load = "";

            function f() {
                var loading = layer.load(0, {
                    shade: false,
                    time: 2 * 1000
                });
            }

            function f1() {

                var loading = layer.load(1, {
                    shade: false,
                    time: 2 * 1000
                });
            }


            function f2() {
                var loading = layer.load(1, {
                    shade: true,
                    time: 2 * 1000
                });
            }

            function f3() {

                var loading = layer.load(2, {});
                setTimeout(function() {
                    layer.close(loading);
                }, 3000);
            }


            function f4() {

                return layer.msg('拼命执行中...', {
                    icon: 16,
                    shade: [0.5, '#f5f5f5'],
                    scrollbar: false,
                    offset: 'auto',
                    time: 1000
                });



            }
        </script>
    </body>

</html>
